﻿
@{
    Layout = "~/Views/Shared/_Layout3.cshtml";
}

<style type="text/css">
    .container {
        padding: 15px;
    }

    .box {
        padding: 15px;
        background-color: #fff;
        border-radius: 15px;
    }

    .box-title {
        font-weight: 700;
        color: #000;
        font-size: 18px;
        padding-bottom: 5px;
        text-align: center;
    }

    .box-item {
        padding: 10px 0;
        display: flex;
        align-items: center;
        color: #000;
        border-bottom: 1px solid #efefef;
        font-size: 16px;
        position: relative;
    }

    .box-item-label {
        color: #999;
        width: 100px;
        text-align: right;
    }

    .input1 {
        margin-left: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-style: none;
    }
</style>
<form class="layui-form">
    <div class="container">
        <div class="box">
            <div class="box-title">账户密码</div>
            <div class="box-item">
                <div class="box-item-label">原密码:</div>
                <input type="password" class="input1" lay-verify="required|password" lay-reqtext="请输入原密码"
                       placeholder="请输入原密码" id="oldPassword" autocomplete="off" lay-vertype="tips" maxlength="12">
            </div>
            <div class="box-item">
                <div class="box-item-label">新密码:</div>
                <input type="password" class="input1" lay-verify="required|password" lay-reqtext="请输入新密码"
                       placeholder="请输入新密码" id="newPassword" autocomplete="off" lay-vertype="tips" maxlength="12">
            </div>
            <div class="box-item">
                <div class="box-item-label">确认新密码:</div>
                <input type="password" class="input1" lay-verify="required|confirmPassword" lay-reqtext="请再次输入新密码"
                       placeholder="请再次输入新密码" id="newPassword2" autocomplete="off" lay-vertype="tips" maxlength="12">
            </div>
        </div>
    </div>
    <div style="width: 90%; margin: 0px auto;">
        <button type="submit" class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit lay-filter="filter-updatePwd"
                style="font-size: 16px; height: 44px;">
            保存
        </button>
    </div>
</form>
<script type="text/javascript">
    layui.use(["form", "layer", "jquery"], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        $(document).ready(function () {

        });

        form.verify({
            password: [/\w{6,12}/, "密码格式不正确！"],
            confirmPassword: function (value) {
                if ($("#newPassword").val() != $("#newPassword2").val()) {
                    return "两次新密码输入不一致！";
                }
            }
        });

        form.on("submit(filter-updatePwd)", function (data) {
            //console.log(data);

            var jsonData = {
                OldPwd: hex_md5($("#oldPassword").val()).toUpperCase(),
                NewPwd: hex_md5($("#newPassword").val()).toUpperCase(),
                ConfirmNewPwd: hex_md5($("#newPassword2").val()).toUpperCase()
            };

            var loadingIndex = layer.msg(addStyle("正在保存账户密码......"), { icon: 16, shade: 0.01, time: false });
            $.ajax("/User/UpdatePwd", {
                method: "POST",
                data: jsonData,
                complete: function (jqXHR, textStatus) {
                    layer.close(loadingIndex);
                },
                success: function (data, textStatus, jqXHR) {
                    if (data.Success == true) {
                        layer.msg(addStyle("保存成功！"), {
                            icon: 1, time: 1 * 1000, end: function () {
                                window.location = "/Account/Login";
                            }
                        });
                    } else {
                        layer.msg(addStyle("保存失败: " + data.Msg), { icon: 2, time: 3 * 1000, closeBtn: true });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg(addStyle("系统错误，请联系管理员！"), { icon: 2, time: 3 * 1000, closeBtn: true });
                }
            });

            return false;
        });

        function addStyle(str) {
            return '<span style="font-size: 16px;">' + str + '</span>';
        }
    });
</script>
